<script setup lang="ts">
import NavBar from '@renderer/components/navBar.vue'
import formButton from '@renderer/components/formButton.vue'
import { ref } from 'vue'
import backgrounForm from '@renderer/components/backgrounForm.vue'
import carpenterForm from '@renderer/components/carpenterForm.vue'
import handleCollectionData from '@renderer/utils/handleCollectionData'
import { useRouter } from 'vue-router'
import useComputeForm from '@renderer/composables/useComputeForm'
import { Round, CheckOne } from '@icon-park/vue-next'
const route = useRouter()
const pageQuery = route.currentRoute.value.query
const addCeilingDialog = ref(false)
const allCeiling = ref(['背景墙项目', '木作项目'])
const checkCeiling = ref<string[]>([])
const carpenterRef = ref<{ handleComputeHouseLong: Function }>()
const handleAddCeiling = () => {
  addCeilingDialog.value = true
}
const handleCheckCeiling = (item: any) => {
  if (checkCeiling.value.includes(item)) {
    checkCeiling.value = checkCeiling.value.filter((ceilingItem) => ceilingItem !== item)
  } else {
    checkCeiling.value.push(item)
  }
}
const handleClose = () => {
  addCeilingDialog.value = false
}
const getceilingData = () => {
  const backGround = checkCeiling.value.includes('背景墙项目') ? backGroundFormItem.value! : []
  const carpenter = checkCeiling.value.includes('木作项目') ? carpenterFormItem.value! : []
  return [...backGround, ...carpenter]
}
const getComputeHouseInfo = (houseInfo: RoomListModel[]) => {
  carpenterRef.value![0].handleComputeHouseLong(houseInfo)
}
defineExpose({
  getceilingData,
  getComputeHouseInfo,
})
const emit = defineEmits<{
  (e: 'startCompute'): void
}>()
const startCompute = () => {
  emit('startCompute')
}
const { backGroundFormItem, handleBackGroundFromItem, carpenterFormItem, handleCarpenterFormItem } =
  handleCollectionData()
await handleBackGroundFromItem(pageQuery.calculate_id as unknown as number, pageQuery.house_number as unknown as number)
await handleCarpenterFormItem(pageQuery.calculate_id as unknown as number, pageQuery.house_number as unknown as number)
const { getCarpentryGather } = useComputeForm()
const initForm = async () => {
  const res = await getCarpentryGather({
    calculate_id: pageQuery.calculate_id,
    house_number: pageQuery.house_number,
  })
  if (res.length) {
    checkCeiling.value = []
    res.map((projectItem) => {
      let carpentryInfoList = [] as any[]
      switch (projectItem.cate_name) {
        case '背景墙项目':
          carpentryInfoList = [...backGroundFormItem.value!]
          carpentryInfoList = handleData(carpentryInfoList, projectItem)
          backGroundFormItem.value = carpentryInfoList
          break
        case '木作项目':
          carpentryInfoList = [...carpenterFormItem.value!]
          carpentryInfoList = handleData(carpentryInfoList, projectItem)
          carpenterFormItem.value = carpentryInfoList
          break
      }
      checkCeiling.value.push(projectItem.cate_name)
    })
  }
}
const handleData = (carpentryInfoList, projectItem) => {
  carpentryInfoList.forEach((item) => {
    const itemObjInfo = projectItem.carpentry_info.find((itemObj) => itemObj.name == item.name)
    item.number = itemObjInfo.number * 1
    item.name = itemObjInfo.name
  })
  return carpentryInfoList
}
await initForm()
</script>

<template>
  <main>
    <el-divider>
      <span class="text-xl">木工数据</span>
    </el-divider>
    <div class="flex justify-end gap-5">
      <formButton @click="handleAddCeiling">添加项目</formButton>
    </div>
    <div class="flex flex-col" v-for="(item, index) in checkCeiling" :key="index">
      <el-divider content-position="left">
        <span class="text-xl">{{ item }} </span>
      </el-divider>
      <!-- <div class="flex justify-end" v-if="item == '吊顶项目'">
        <formButton @click="handleComputeSide">计算吊顶面积</formButton>
      </div> -->
      <!-- <ceilingForm v-if="item == '吊顶项目'" :selectRoomList="props.selectRoomList" ref="ceilingRef" /> -->
      <backgrounForm v-if="item == '背景墙项目'" :backGroundFormItem="backGroundFormItem!" />
      <carpenterForm
        v-if="item == '木作项目'"
        :carpenterFormItem="carpenterFormItem!"
        @startCompute="startCompute"
        ref="carpenterRef" />
    </div>
    <el-dialog v-model="addCeilingDialog" width="640" align-center :show-close="false" style="padding: 0">
      <div class="flex flex-col">
        <NavBar title="新增项目" @handleClose="handleClose" />
        <div class="grid grid-cols-4 gap-y-5 gap-x-10 p-3">
          <div
            v-for="(item, index) in allCeiling"
            :key="index"
            class="flex justify-between items-center py-2 px-3 rounded-md"
            :class="checkCeiling.includes(item) ? 'bg-[#fff4e5] text-[#FF9600]' : 'bg-[#EEEEEE] text-black'"
            @click="handleCheckCeiling(item)">
            <span>{{ item }}</span>
            <Round theme="outline" size="18" fill="#FF9600" v-if="!checkCeiling.includes(item)" />
            <CheckOne theme="outline" size="18" fill="#FF9600" v-else />
          </div>
        </div>
      </div>
    </el-dialog>
  </main>
</template>

<style lang="scss"></style>
